<template>
  <div class="article page page_padding">
    <h1 class="tips menu">
      <span>文章</span>
      <div style="flex:1"></div>
      <router-link to="/article/write">
        <small>发表</small>
      </router-link>
    </h1>

    <div class="container">
      <transition-group name="slide-fade">
        <router-link
          v-for="article in articles"
          :to="`/article/${article?.aid}`"
          :key="article?.aid"
        >
          <SingleArticle :title="article?.atitle" :content="article?.acontent" />
        </router-link>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue"
import { apis } from "../api"
import NavigateBar from "../components/NavigateBar.vue"
import SingleArticle from "../components/SingleArticle.vue";

export default {
  beforeRouteEnter(to, from, next) {
    apis.checkLogin(next, {
      title: "尚未登录，请登录",
      icon: to.meta.icon,
      showDuration: 5000,
    });
  },
  setup() {
    const data = reactive({
      articles: []
    });
    const getAllArticle = () => {
      apis.getAllArticle().then(response => {
        response?.data?.result.forEach(element => {
          data.articles.push(element);
        });
      });
    };
    getAllArticle();
    return { ...toRefs(data) };
  },
  components: { NavigateBar, SingleArticle }
}
</script>

<style lang="less" scoped>
.article {
  padding-top: 40px;
  color: white;
}

.container {
  display: flex;
  gap: 30px;
}

.menu {
  display: flex;
  justify-content: space-between;

  & small {
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    font-size: 18px;
    letter-spacing: 2px;
    transition: 0.3s all ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    &:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>